<template>
  <div>
    <el-card class="theme-card" shadow="hover">
      <h3>{{ theme }}</h3>
    </el-card>
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.image" alt="carousel" style="width: 100%; height: 100%; object-fit: cover;">
      </el-carousel-item>
    </el-carousel>
    <el-card class="comment-card" shadow="hover">
      <h3>评论列表</h3>
      <div v-for="item in paginatedComments" :key="item.pageId" style="display: flex; grid-gap: 20px; margin-bottom: 20px">
        <!-- 评论人头像 -->
        <img :src="item.userPhoto" alt="" style="width: 36px; height: 36px; border-radius: 50%">
        <!-- 评论内容 -->
        <div style="flex: 1">
          <!-- 这是第一级评论-->
          <div style="margin-bottom: 10px">
            <div style="color: #666; margin-bottom: 10px">{{ item.nickname }}</div>
            <div style="color: #444; margin-bottom: 10px">{{ item.content }}</div>
            <div style="color: #999; font-size: 12px">{{ item.createtime }}</div>
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="comments.length"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
      <!-- 添加评论表单 -->
      <el-form :model="newComment" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="内容">
          <el-input v-model="newComment.content" placeholder="请输入评论内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交评论</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { commentListService, addCommentService } from '@/api/comment.js';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';

// 导入图片资源
import forum1 from '@/assets/pic/Forum/forum1.jpg';
import forum2 from '@/assets/pic/Forum/forum2.jpg';
import forum3 from '@/assets/pic/Forum/forum3.jpg';
// 轮播图相关状态
const carouselItems = ref([
  {
    id: 1,
    image: forum1
  },
  {
    id: 2,
    image: forum2
  },
  {
    id: 3,
    image: forum3
  }
]);

// 状态管理
const comments = ref([]); // 存储评论信息
const theme = ref('您对我们的产品有什么建议或新的想法？'); // 当前主题
const newComment = ref({
  content: ''
});

// 分页相关状态
const pageSize = ref(5); // 每页显示的数量
const currentPage = ref(1); // 当前页码

// 计算属性，用于分页并重新编号
const paginatedComments = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return comments.value.slice(start, end).map((item, index) => ({
    ...item,
    pageId: start + index + 1 // 重新计算每一页的序列号
  }));
});

// 获取评论数据并在控制台输出
const getCommentsData = async () => {
  try {
    const response = await commentListService({ page: 1, size: 100 }); // 获取所有评论
    // 处理后端返回的数据
    comments.value = response.data.list.map(item => ({
      nickname: item.nickname,
      userPhoto: item.userPhoto,
      content: item.content,
      createtime: item.createtime ? dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss') : ''
    })) || [];
    console.log('Fetched comments:', comments.value); // 输出获取到的数据
  } catch (error) {
    console.error('Failed to fetch comments:', error);
    ElMessage.error('加载评论信息失败，请稍后再试');
  }
};

const handleSubmit = async () => {
  if (!newComment.value.content) {
    ElMessage.warning('评论内容不能为空');
    return;
  }
  try {
    const response = await addCommentService(newComment.value);

    getCommentsData();
    newComment.value.content = ''; // 清空输入框
    ElMessage.success('评论添加成功!');
  } catch (error) {
    console.error('Failed to add comment:', error);
    newComment.value.content = ''; // 清空输入框
    ElMessage.error('评论添加失败，请稍后再试');
  }
};

// 分页改变时触发
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 组件挂载时获取数据
onMounted(() => {
  getCommentsData();
});
</script>

<style scoped>
.comment-card, .theme-card {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

h3 {
  text-align: center;
  margin-bottom: 20px;
}

.el-form {
  width: 80%;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input {
  width: 100%;
}

.el-button {
  width: 100%;
}

/* 轮播图样式 */
.el-carousel {
  height: 300px; /* 修改高度 */
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 修改 object-fit */
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>